<!DOCTYPE html>
<html lang="en">
<head>
	<title>Calendar - Popup Mode</title>
	<meta charset="utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	<link href="../base-reset.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet"
		type="text/css" />
	<link href="../demos-single.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.ui.wijcalendar.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.ui.wijpopup.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.ui.wijcalendar.js" type="text/javascript"></script>
	<script type="text/javascript">

		$(function () {
			$("#calendar").wijcalendar(
		{
			popupMode: true,
			selectedDatesChanged: function () {
				var selDate = $(this).wijcalendar("getSelectedDate");
				if (!!selDate) $("#popdate").val(selDate.toDateString());
			}
		});

		$("#popdate").click(function () {
				$("#calendar").wijcalendar("popup", {
					of: $("#popdate"),
					offset: '0 2'
				});
			})
		});
	
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Popup Mode</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="calendar">
			</div>
			<label for="popdate">Choose a Date:</label>
			<input name="popdate" type="text" id="popdate" style="width: 180px;" />
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
			</p>
		</div>
	</div>
</body>
</html>
